import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity, Image, ScrollView
} from "react-native";
import { API, API_GENERATE } from '../../../../config/api';
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { Common } from '../../../../component/common/Common.js';
import { PageStatusIndex } from '../../../../component/page-status/PageStatusIndex';
const scale = GLOBAL.SCALE;
import HTTP from '../../../../utils/http'

export class SingleAreaListPage extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		const { params } = navigation.state;
		return {
			headerTitle: '选择省',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../../imgs/goBackEmpty.png')} />),
			headerStyle: style.head.headerStyle,
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
		}
	};

	constructor(props) {
		super(props);
		let { levelNode, areaId } = props.navigation.state.params;
		this.state = {
			levelNode: levelNode,
			provinceData: [],
			status: 'data',
			areaId: areaId || -1,
		}
	}

	componentWillMount () {
		this._getProvinceList();
	}

	//获取列表
	async _getProvinceList () {
		this.setState({ status: 'loading' });
		let provinceData = await HTTP.POST(API_GENERATE(API.GET_PROVINCE_LIST_BY_LEVEL), { nodeLevel: this.state.levelNode })
		this.setState({ provinceData: provinceData || [] });
		this.setState({ status: 'data' })
	}

	//选中
	_selectFn = (item) => {
		this.setState({
			areaId: item.areaId
		}, function () {
			let This = this;
			setTimeout(() => {
				This.props.navigation.state.params.callBack(item);
				This.props.navigation.goBack();
			})
		})
	}

	render () {
		let { status, provinceData, areaId } = this.state;
		return (
			<View style={styles.container}>
				<ScrollView>
					{
						provinceData.map((item, index) => {
							return (<TouchableOpacity onPress={() => { this._selectFn(item) }} key={index}>
								<View style={styles.exBox}>
									{areaId == item.areaId ? (
										<Image style={styles.iconImg} source={require('../../../../imgs/global/success.png')} style={styles.imgPosition} />
									) : null}
									<View style={styles.exHead}>
										<View style={styles.exHeadLeft}>
											<Text style={styles.exHeadTitle}>{item.areaName}</Text>
										</View>
									</View>
								</View>
							</TouchableOpacity>)
						})
					}
				</ScrollView>
				<PageStatusIndex status={status} onErrorPress={this._onErrorPress} />
			</View >
		)
	}
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: style.color.light,
	},
	exBox: {
		height: 44 * scale,
		backgroundColor: '#fff',
		marginTop: 12 * scale
	},
	exHead: {
		height: 44 * scale,
		marginLeft: 12 * scale,
		marginRight: 12 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	exHeadLeft: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	exHeadTitle: {
		fontSize: 14 * scale,
		color: '#222',
		marginRight: 5 * scale
	},
	imgPosition: {
		position: 'absolute',
		bottom: 16 * scale,
		right: 12 * scale,
		width: 14 * scale,
		height: 14 * scale,
	}

})